<template>
  <div ref="appRef" class="my-container-box">
    <page-header>
      <div v-permission="{ action: 'add' }" class="btn" @click="handleAdd(false, {})">
        <i class="iconfont icon-xinzeng1"></i>新增
      </div>
    </page-header>
    <search-top-form
      class="search-form"
      :search-form="searchObj.searchForm"
      :search-item="searchItem"
      @handle-search="handleSearch"
      @handle-reset="handleReset"
      @re-count-table-height="getTableHeight"
    ></search-top-form>
    <table-page-content
      :loading="tableObj.loading"
      :table-data="tableObj.tableList"
      :table-headers="tableHeaders"
      :table-height="tableHeight"
      :tree-props="{ children: 'children' }"
      :is-slot-num="false"
      :row-key="'permissionId'"
      :page-config="searchObj.pageConfig"
      @page-size-change="pageSizeChange"
      @current-page-change="currentPageChange"
    >
      <template #permissionLogo="{ row }">
        <i :class="`tab-iconfont iconfont ${row.permissionLogo}`"></i>
      </template>
      <template #permissionType="{ row }">
        {{ getDicsName(menuTypeDics, row.permissionType) }}
      </template>
      <template #permissionDataLimit="{ row }">
        {{ row.permissionDataLimit == '1' ? '限制' : '不限制' }}
      </template>
      <template #operate="{ row }">
        <div class="table-btn-box">
          <el-button
            v-permission="{ action: 'add' }"
            :class="row.permissionLevels >= maxLevel ? 'disable-btn' : ''"
            link
            @click="handleAdd(false, row)"
            ><i class="iconfont icon-xiaji"></i><span class="text">创建下级</span></el-button
          >
          <el-button v-permission="{ action: 'edit' }" link @click="handleAdd(true, row)"
            ><i class="iconfont icon-bianji4"></i><span class="text">编辑</span></el-button
          >
          <el-button
            v-permission="{ action: 'remove' }"
            :class="row.parentPermissionId == '0' || row.children?.length > 0 ? 'disable-btn' : ''"
            link
            @click="handleDel(row)"
          >
            <i class="iconfont icon-tubiaozhizuomoban"></i><span class="text">删除</span>
          </el-button>
        </div>
      </template>
    </table-page-content>
    <add-component ref="addRef" @handle-added="getList"></add-component>
  </div>
</template>

<script lang="ts" setup name="Menu">
import { useProxy } from '@/utils/proxy'
import { useTableHeight } from '@/hooks/tableHeight'
import { pageConfig, getSystemParams } from '@/utils/config'
import { tableHeaders, searchItem } from './config'
import { getMenuList, delSubmit } from './api'
import { menuTypeDics } from '@/hooks/dicsData'
import { getDicsName } from '@/utils/index'
import addComponent from './components/add.vue'
const { appRef, getTableHeight, tableHeight } = useTableHeight()
const { proxy } = useProxy()
const maxLevel = ref(getSystemParams('001'))
const addRef = ref()
// 搜索对象
const searchObj = reactive({
  searchForm: { name: null },
  pageConfig: { ...pageConfig }
})
const tableObj = reactive({
  loading: false,
  tableList: []
})
// 搜索
const handleSearch = () => {
  searchObj.pageConfig.pageIndex = 1
  getList()
}
const handleReset = () => {
  searchObj.searchForm = { name: null }
  handleSearch()
}
// 获取列表数据
const getList = () => {
  tableObj.loading = true
  tableObj.tableList = []
  getMenuList<any>({
    ...searchObj.searchForm,
    ...searchObj.pageConfig
  })
    .then((res) => {
      tableObj.tableList = res.data
      searchObj.pageConfig.total = res.total
      tableObj.loading = false
    })
    .catch(() => {
      tableObj.loading = false
    })
}
// 表格切换page-size
const pageSizeChange = (val: number) => {
  searchObj.pageConfig.pageSize = val
  searchObj.pageConfig.pageIndex = 1
  getList()
}
// 切换分页
const currentPageChange = (val: number) => {
  searchObj.pageConfig.pageIndex = val
  getList()
}
// 新增/编辑
const handleAdd = (isEdit: boolean, row?: any) => {
  if (!isEdit && row) {
    if (row.permissionLevels >= maxLevel.value) return
  }
  addRef.value.state.currentId = row?.permissionId || ''
  addRef.value.state.parentId = row?.parentPermissionId || ''
  addRef.value.state.isEdit = isEdit
  addRef.value.state.formData.parentPermissionName = row?.permissionName || ''
  if (!isEdit && row?.permissionId) addRef.value.state.formData.permissionType = '2'
  if (isEdit) addRef.value.getDetail()
  addRef.value.state.show = true
}
// 删除
const handleDel = (row: any) => {
  if (row.parentPermissionId == '0' || row.children?.length > 0) return
  proxy.$message.confirm('菜单删除后，将无法恢复，请确认是否删除该菜单?').then(async () => {
    await delSubmit(row.permissionId)
    proxy.$message.msgSuccess('删除成功')
    getList()
  })
}
onActivated(() => {
  maxLevel.value = getSystemParams('001')
})
const init = () => {
  getList()
}
init()
</script>

<style lang="scss" scoped></style>
